<template>
    <div class="js-area-cascader">
        <el-cascader :popper-class="isRootProvince == true ? 'myCascader' : 'null'" v-model="selectedValues"
            :options="areaOptions" :props="cascaderProps" placeholder="选择江苏省-市-区-镇" clearable size="medium"
            style="width: 100%" @change="handleAreaChange" ref="cascaderRef" show-all-levels>

        </el-cascader>
    </div>
</template>

<script>
export default {
    name: "JiangsuAreaCascader",
    props: {
        defaultSelected: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            selectedValues: [], // 单选选中值（数组，如 [level1-1, level2-1-1]）
            areaOptions: [],
            cascaderProps: {
                lazy: true,
                lazyLoad: this.loadChildData,
                checkStrictly: true,
                label: "nodeText",
                value: "nodeId",
                children: "children",
                loadingIcon: "el-icon-loading",
            },
            isRootProvince: false, // 根节点是否为省级（用于快速判断）
            reFun: ""
        };
    },
    watch: {
        defaultSelected: {
            immediate: true,
            handler(newVal) {
                this.selectedValues = [...newVal];
            }
        },
        selectedArea(newVal) {
            if (newVal.length === 0 && this.$refs.jsCascaderRef) {
                this.$refs.jsCascaderRef.clearCheckedNodes();
            }
        }
    },
    mounted() {
        // this.initProvinceData();
        this.isRootProvince = this.areaOptions[0].nodeId.substring(2, 4) === "00";
    },
    methods: {
        // 初始化江苏省数据
        // initProvinceData() {
        //   setTimeout(() => {
        //     this.areaOptions = [
        //       {
        //         nodeId: "320000",
        //         nodeText: "江苏省",
        //         hasChildren: true // 明确标识有子级
        //       }
        //     ];
        //     // 触发组件重新渲染（关键修复）
        //     this.$forceUpdate();
        //   }, 500);
        // },
        // 懒加载子级数据（核心修复）
        loadChildData(node, resolve) {
            console.log("this", resolve)
            this.reFun = resolve
            // 修复：同时兼容node.value和node.nodeId（不同版本Element可能有差异）
            if (node && node.level == 0) { //x
                // this.areaOptions = [
                //   {
                //     nodeId: "320000",
                //     nodeText: "江苏省",
                //     levle: 1,
                //     hasChildren: true // 明确标识有子级
                //   }
                // ];
                this.areaOptions = [
                     { nodeId: "320100", nodeText: "南京市", level: 2, hasChildren: true },
                    // { nodeId: "320500", nodeText: "苏州市", level: 2, hasChildren: true },
                ];
            }
            const parentId = node.value || node.nodeId;
            node.loading = true;
            setTimeout(() => {
                let childData = [];
                // 修复：确保parentId匹配逻辑正确
                switch (parentId) {
                    // 江苏省 -> 市级数据（重点修复此分支）
                    case "320000":
                        childData = [
                            { nodeId: "320100", nodeText: "南京市", level: 2, hasChildren: true },
                            { nodeId: "320200", nodeText: "无锡市", level: 2, hasChildren: true },
                            { nodeId: "320300", nodeText: "徐州市", level: 2, hasChildren: true },
                            { nodeId: "320400", nodeText: "常州市", level: 2, hasChildren: true },
                            { nodeId: "320500", nodeText: "苏州市", level: 2, hasChildren: true },
                            { nodeId: "320600", nodeText: "南通市", level: 2, hasChildren: true },
                            { nodeId: "320700", nodeText: "连云港市", level: 2, hasChildren: true },
                            { nodeId: "320800", nodeText: "淮安市", level: 2, hasChildren: true },
                            { nodeId: "320900", nodeText: "盐城市", level: 2, hasChildren: true },
                            { nodeId: "321000", nodeText: "扬州市", level: 2, hasChildren: true },
                            { nodeId: "321100", nodeText: "镇江市", level: 2, hasChildren: true },
                            { nodeId: "321200", nodeText: "泰州市", level: 2, hasChildren: true },
                            { nodeId: "321300", nodeText: "宿迁市", level: 2, hasChildren: true }
                        ];
                        break;

                    // 南京市 -> 区级数据
                    case "320100":
                        childData = [
                            { nodeId: "320102", nodeText: "玄武区", level: 3, hasChildren: true },
                            { nodeId: "320104", nodeText: "秦淮区", level: 3, hasChildren: true },
                            { nodeId: "320105", nodeText: "建邺区", level: 3, hasChildren: true },
                            { nodeId: "320106", nodeText: "鼓楼区", level: 3, hasChildren: true },
                            { nodeId: "320111", nodeText: "浦口区", level: 3, hasChildren: true }
                        ];
                        break;

                    // 玄武区 -> 镇级数据
                    case "320102":
                        childData = [
                            { nodeId: "320102001", nodeText: "梅园新村街道", level: 4, hasChildren: false },
                            { nodeId: "320102002", nodeText: "新街口街道", level: 4, hasChildren: false },
                            { nodeId: "320102003", nodeText: "玄武门街道", level: 4, hasChildren: false }
                        ];
                        break;

                    // 苏州市 -> 区级数据
                    case "320500":
                        childData = [
                            { nodeId: "320505", nodeText: "虎丘区", level: 3, hasChildren: true },
                            { nodeId: "320506", nodeText: "吴中区", level: 3, hasChildren: true },
                            { nodeId: "320583", nodeText: "昆山市", level: 3, hasChildren: true }
                        ];
                        break;

                    // 昆山市 -> 镇级数据
                    case "320583":
                        childData = [
                            { nodeId: "320583100", nodeText: "玉山镇", level: 4, hasChildren: false },
                            { nodeId: "320583101", nodeText: "巴城镇", level: 4, hasChildren: false }
                        ];
                        break;
                }

                // 关键：确保子级数据格式正确（添加children属性）
                childData = childData.map(item => ({
                    ...item,
                    children: item.hasChildren ? [] : null, // 显式声明children，避免组件误判
                    leaf: item.level == 4
                }));

                resolve(childData);
                node.loading = false;
            }, 500);
        },

        handleAreaChange(val) {
            this.$nextTick(() => {
                const dom = document.getElementsByClassName("el-radio is-checked")[0];
                const brother = dom.nextElementSibling;
                brother.click();
            });
            this.$emit("areaChange", val);
        },
    }
};
</script>
<style lang="less" scoped>
/* 自定义节点布局：单选框与文本对齐 */
.cascader-node-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    /* 单选框与文本间距 */
}

/* 单选框样式微调 */
.el-radio {
    font-size: 14px;
    cursor: pointer;
}
</style>
<style>
.js-area-cascader {
    max-width: 500px;
}

/* // 添加全局样式  单选、多选影藏 */
.myCascader .el-cascader-panel .el-cascader-menu:first-child .el-scrollbar__wrap ul li label,
.myCascader .el-cascader-panel .el-cascader-menu:first-child .el-scrollbar__wrap ul li .el-checkbox {
    display: none !important;
}
</style>
<style></style>